<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #ad{
            width: 400px;
            height: 300px;
            display: none;
            background-color: #ddd;
            position: fixed;
            right: 0;
            bottom: 0;
        }
        #close{
            float: right;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            cursor: pointer;
            color: #fff;
        }
    </style>
    </head>
    <body>
        
    <div id="ad">
        <p id="close">X</p>
        <p>
            <span id="time">10</span>
            <span>s之后自动关闭广告</span>
        </p>
    </div>

    <script>
    
        function get(id){
            return document.getElementById(id) ;
        }
        var oAd = get('ad') ;
        var oTime = get('time') ;
        var oClose = get('close') ;
        
    
        showAd() ;
   
        function showAd(){
            setTimeout(function (){
                
                oAd.style.display = 'block' ;
               
                var t = setInterval(function (){
                  
                    oTime.innerHTML--;
                   
                    if(oTime.innerHTML < 0){
                       
                        oAd.style.display = 'none' ;
                      
                        clearInterval(t) ;
                     
                        oTime.innerHTML = 10 ;
                     
                        showAd() ;
                    }
                },1000)
            
                oClose.onclick = function() {
                    
                    oAd.style.display = 'none' ;
               
                    clearInterval(t);
              
                    oTime.innerHTML = 10 ;
                    showAd()
    
                }
    
            },3000)
        }
        
    </script>

    

    
</body>
</html>